.kf-sidebar{
	padding-bottom: 50px;
}

.kf-sidebar-l{
	width: 924px;
	padding: 16px;
	background: $color-acquiesce;

	.kf-column{
		border-top: 1px solid $btn-color-default;
		border-bottom: 1px solid $border-color;
		margin-bottom: 28px;

		.column-dl{
			padding: 0 10px;
			min-height: 50px;
			color: $font-color;
			background: $bg-color-second;
			border-bottom: 1px dashed $border-color;
			dt{
				line-height: 50px;
			}

			.middle{
				width: 810px;
				margin-top: 12px;
				
				.column-link{
					display: inline-block;
					padding: 2px 4px;
					margin: 0 17px 12px 17px;
					color: $font-color;
					border: 1px solid transparent;
					
					&:hover{
						color: $btn-color-default;
						border-color: $btn-color-default;
					}
				}

				.link-active{
					color: $btn-color-default;
					border: 1px solid $btn-color-default;
				}
			}

			.link-show{
				line-height: 50px;
				text-decoration: underline;
				font-size: $font-size-xs;
				color: $mark-color-six;
			}
		}

		.column-dl:last-child{
			border-bottom: none;
		}

	}

	.kf-task{
		border-top: 1px solid $btn-color-default;

		.kf-task-top{
			padding: 0 20px;
			height: 38px;
			color: $font-color;
			font-size: $font-size-xs;
			background: $color-bg-third;
			
			.sort{
				line-height: 38px;
			}
			.sort-all{
				.sort-type{
					display: inline-block;
					color: $font-color;
					margin-top: 6px;
					padding: 4px 10px;
					border: 1px solid $border-color;
					
					.sort-bg{
						display: inline-block;
						width: 8px;
						height: 12px;
						margin: 2px 0 2px 4px;
						background: url(../images/hot-task/sort.png) no-repeat;
					}

					&:hover{
						color: $btn-color-default;

						.sort-bg{
							background: url(../images/hot-task/sort2.png) no-repeat;
						}
					}
				}

				.sort-active{
					color: $btn-color-default;
					.sort-bg{
						background: url(../images/hot-task/sort2.png) no-repeat;
					}
				}

				.sort-active-up{
					color: $btn-color-default;
					.sort-bg{
						background: url(../images/hot-task/sort-b2.png) no-repeat;
					}
					&:hover{
						.sort-bg{
							background: url(../images/hot-task/sort-b2.png) no-repeat;
						}
					}
				}
			}

			.sort-locality{
				
				.locality-position {
					position: relative;
				}
				.locality{
					margin-top: 8px;
					padding: 2px 4px;
					border: 1px solid $border-color;
					cursor: pointer;

					.locality-i{
						display: inline-block;
						width: 12px;
						height: 8px;
						margin-top: 5px;
						margin-left: 4px;
						background: url(../images/hot-task/locality.png) no-repeat;
					}
				}

				.where{
					position: absolute;
					top: 29px;
					right: 0;
					z-index: 99;
					width: 300px;
					padding: 10px;
					background: $color-acquiesce;
					border: 1px solid $border-color;

					a{
						display: inline-block;
						color: $font-color;
						padding: 8px 10px;

						&:hover{
							color: $btn-color-default;
						}
					}
				}
			}
		}

		.kf-task-list{
			margin-top: 18px;
			.task{
				width: 204px;
				padding: 8px;
				margin-bottom: 18px;
				margin-right: 12px;
				border: 1px solid $border-color;

				&:hover{
					@include box-shadow(4px 4px 2px $border-color);
				}
				p{
					margin: 10px 0;
				}
			}

			.task:nth-child(4n){
				margin-right: 0;
			}

			.task-top img{
				width: 204px;
				height: 170px;
			}

			.task-num{
				color: $mark-color-second;
				font-size:  $font-size-s;
			}

			.task-ok{
				color: $font-color;
				font-size:  $font-size-xs;
			}

			.task-info{
				color: $h-color;
				&:hover{
					text-decoration: underline;
				}
			}

			.task-d{
				font-size: $font-size-xs;;
				color: $font-color-default;
			}

			.task-shop{
				color: $font-color-default;
				&:hover{
					text-decoration: underline;
				}
			}

			.i{
				display: inline-block;
				width: 12px;
				height: 14px;
				margin-right: 4px;
				background: url(../images/service/location.png) no-repeat;
			}
		}
	}

	.kf-task-page{
		margin: 20px 0;
		text-align: right;
		font-size: 0;

		li{
			display: inline-block;
		}
		a{
			font-size: $font-size;
			display: inline-block;
			padding: 6px 12px;
			color: $font-color;
			background: $color-bg-four;
			border: 1px solid $border-color;
			&:hover{
				border: none;
				background: $color-acquiesce;
			}
		}

		.page-active{
			border: none;
			background: $color-acquiesce;
		}
	}
}